<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jq1</title>
	</head>

	<body>
		<div id="main" class="wrap" name="ggwrapgg">
			DIV
			<span class="inner" id="mspan">
				SPAN
				<em class="sub">EM</em>
			</span>
		</div>
		<div id="main1" class="wrap" name="wrap">
			DIV
			<span class="inner" >
				SPAN
				<em class="sub">EM2</em>
			</span>
		</div>

	</body>
	<script type="text/javascript">
		function log(str) {
			console.log(str);
		}

		function trim(str) {
			return str.replace(/^\s+|\s+$/g, "");
		}
		//根据属性选择元素
		function byAttr(parent,sel){
			sel = sel.substring(0,sel.length-1);//div[name
			sel = sel.split("[");//sel = [div,name];
			var parents = parent.getElementsByTagName(sel[0]);
			var arr = [];
			for(var i=0;i<parents.length;i++){
				var p = parents[i];
				if(/\*/.test(sel[1])){//如果是 [name*=wrap]
					log("*=");
					var _sel = sel[1].split("*=");
					//_sel[1] = wrap 构建正则匹配wrap的单词边界
					var reg = new RegExp(""+_sel[1]+"");
					//如果能够匹配到
					if(reg.test(p.getAttribute(_sel[0]))){
						arr.push(p);
					}
				}else if(/\^/.test(sel[1])){// [name^=wrap]
					log("^=")
				}else if(/\$/.test(sel[1])){// [name$=wrap]
					log("$=")
				}else{// [name]
					log("只有属性")
				}
			}
			return arr;
		}
		function byClass(parent, sel) {
			//			IE8及以下不支持getElemntsByClassName方法，所以处理一下兼容性
			if (parent.getElementsByClassName) {
				//如果支持byClassName方法   直接返回选择到的元素
				return parent.getElementsByClassName(sel);
			}
			//获取元素下所有元素的方法 （包括深层次的元素）
			//IE8及以下的获取方法
			var eles = parent.getElementsByTagName("*");
			var reg = new RegExp("\\b" + sel + "\\b");
			var arr = []; //用于存放匹配到的元素
			for (var i = 0; i < eles.length; i++) {
				//得到每一个元素 得到每一个元素的class名称
				var ele = eles[i],
					cName = ele.className;
				// "wrap" "wrap wrap2"
				if (reg.test(cName)) {
					arr.push(ele);
				}
			}
			return arr;
		}

		function getEl(sel) {
			sel = trim(sel);
			var parents = [];
			var childrens = [document];
			sel = sel.replace(/\s+/g, " ");
			sel = sel.split(" ");
			// "#main span" "div span" 
			for (var m = 0; m < sel.length; m++) {
				parents = childrens;
				childrens = [];
				for (var i = 0; i < parents.length; i++) {
					if (sel[m].charAt(0) == "#") {
						log("ID选择器");
						var _sel = sel[m].substring(1);
						log(parents[i])
						var ele = document.getElementById(_sel);
						childrens.push(ele);
					} else if (sel[m].charAt(0) == ".") {
						log("class选择器");
						var _sel = sel[m].substring(1);
						var eles = byClass(parents[i], _sel);
						for (var k = 0; k < eles.length; k++) {
							childrens.push(eles[k]);
						}
//						childrens = eles;
					} else {
						//属性选择器 如：div[name=...] div[name]
						if(/\[/.test(sel[m])){
							log("标签-属性选择器");
							childrens = byAttr(parents[i],sel[m]);
						}else if(/\.|#/.test(sel[m])){//组合选择器 如：div.wrap 选择class为wrap的div  div#main
							log("标签-组合选择器")
						}else{//纯标签选择器  div    span 等
							log("纯标签选择器");
							var eles = parents[i].getElementsByTagName(sel[m]);
							for (var k = 0; k < eles.length; k++) {
								childrens.push(eles[k]);
							}
						}
					}
				}
			}
			return childrens;
		}
		log(getEl("div[name*=wrap]"));
	</script>

</html>